<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.8/vue-router.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <div id='app'>

        <mylogin @father="but"></mylogin>
        <ul class="list-group container">
            <li class="list-group-item" v-for="(item,index) in data" :kye=index>
                {{item.comment}}
                <span class="badge">{{item.name}}</span>
            </li>

        </ul>
    </div>
    <template id="demo">

        <div class="container">

            <div class="form-group">
                <label for="">评论人</label>
                <input type="text" class="form-control" id="" v-model:value="name" placeholder="Input field">
            </div>
            <div class="form-group">
                <label for="">留言内容</label>
                <input type="text" class="form-control" id="" v-model:value="comment" placeholder="Input field">
            </div>

            <button type="submit" class="btn btn-primary" @click="chage">发表</button>


        </div>

    </template>
    <script>

        Vue.component("mylogin", {
            template: "#demo",
            data() {
                return {
                    name: "",
                    comment: ""
                }
            },
            methods: {
                chage() {
                    console.log(this.name);
                    let obj = {
                        comment: this.comment,
                        name: this.name,
                    }

                    this.$emit("father", obj),
                    this.name=""
                    this.comment=""
                }
            },

        })


        const vm = new Vue({
            el: '#app',
            data: {
                data: [
                    {
                        name: "张三",
                        comment: "人无在少年"
                    }
                ]
            }
            ,
            created(){
                this.data = JSON.parse(localStorage.getItem("perso")) || []
            },
            methods: {
                but(date) {
                    console.log(date);
                    this.data.push(date)
                    localStorage.setItem("perso",JSON.stringify(this.data))
                }
            }
        })
    </script>
</body>

</html>